<template>
  <t-table
    row-key="id"
    table-layout="auto"
    :data="store.getGoods()"
    :columns="columns"
    hover
    bordered
  >
    <template #name="{ row }">
      <b>{{ row.goods_name }}</b>
    </template>
    <template #count="{ row }">
      <t-input-number v-model="row.count" @change="store.update()" theme="normal" align="center" class="no-border" autoWidth/>
    </template>
    <template #price="{ row }">
      <t-input-number :decimalPlaces="4" :value="Number(row.price)" @change="value => { row.price = value; store.update() }" theme="normal" align="center" class="no-border" autoWidth />
    </template>
    <template #price_tax="{ row }">
      <t-input-number :value="Number(row.price_tax)" @change="value => onPriceTax(row, value)" theme="normal" align="center" class="no-border" autoWidth />
    </template>
    <template #tax="{ row }">
      <t-tag theme="primary" variant="light">{{ Number(row.tax) }}%</t-tag>
    </template>
    <template #money="{ row }">
      {{ app.money.format(row.money) }}
    </template>
    <template #total="{ row }">
      <b>{{ app.money.format(row.total) }}</b>
    </template> 
    <template #right="{ rowIndex }">
      <t-button theme="danger" shape="square" variant="text" @click="store.del(rowIndex)">
        <template #icon>
          <t-icon name="close" size="20px" />
        </template>
      </t-button>
    </template>
  </t-table>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../../index'
  import store from './store'

  const emit = defineEmits(['update'])
  const plugin = index.plugin
  const columns = [{
    title: plugin.t('order.goods.code'),
    colKey: 'goods_code'
  }, {
    title: plugin.t('order.goods.name'),
    colKey: 'goods_name',
    cell: 'name'
  }, {
    title: plugin.t('order.goods.count'),
    colKey: 'count',
    cell: 'count',
    align: 'center'
  }, {
    title: plugin.t('order.goods.price'),
    colKey: 'price',
    cell: 'price',
    align: 'center'
  }, {
    title: plugin.t('order.goods.tax'),
    colKey: 'tax',
    cell: 'tax',
    align: 'center'
  }, {
    title: plugin.t('order.goods.price_tax'),
    colKey: 'price_tax',
    cell: 'price_tax',
    align: 'center'
  }, {
    title: plugin.t('order.goods.money'),
    colKey: 'money',
    cell: 'money',
    align: 'center'
  }, {
    title: plugin.t('order.goods.total'),
    colKey: 'total',
    cell: 'total',
    align: 'center'
  }, {
    colKey: 'right',
    align: 'right',
    cell: 'right',
    fixed: 'right',
    width: 60
  }]

  // 反推税前
  const onPriceTax = (row, value) => {
    row.price_tax = value
    row.price = app.math.factory(value).divpro(row.tax).format(4)
    store.update()
  }
</script>

